{% load static %}
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}我的博客{% endblock %}</title>
    <link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
    <link rel="stylesheet" href="/static/base/css/bulma.css" />
    <link rel="stylesheet" href="{% static 'base/css/all.min.css' %}" />
    <link rel="stylesheet" href="/static/base/css/bulmaswatch.min.css" />
    <script src=" {% static 'base/js/all.min.js' %}"></script>
  </head>

  <body>
    <!-- header -->
    <header>
      <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="container">
          <div class="navbar-brand">
            <a class="navbar-item" href="/">
              <img src="{% static 'images/logo.jpg' %}" />
            </a>
          </div>

          {% if user.is_authenticated %}
          <div class="navbar-end">
            <div class="navbar-item">
              <div class="buttons">
                <a class="button is-link" href="{% url 'users:user_profile' %}">
                  个人中心
                </a>
              </div>
            </div>
          </div>
          {% else %}
          <div class="navbar-end">
            <div class="navbar-item">
              <div class="buttons">
                <a class="button is-dark" href="{% url 'users:register' %}">
                  <strong>注册</strong>
                </a>
                <a class="button is-black" href="{% url 'users:login' %}">
                  登录
                </a>
              </div>
            </div>
          </div>
          {% endif %}
        </div>
      </nav>
    </header>

    <!-- container -->
    <div class="container mt-3">
      <div class="columns">
        <div class="column is-2">
          {% block navigation %}
          <div class="box">
            <aside class="menu">
              <ul class="menu-list">
                <li>
                  <a
                    href="{% url 'blog:index' %}"
                    class="{% if request.path == '/' %}is-active{% endif %}"
                  >
                    <span class="icon-text">
                      <span class="icon">
                        <i class="fas fa-home"></i>
                      </span>
                      <span>主页</span>
                    </span>
                  </a>
                </li>
                <!-- 遍历分类数据并展示 -->
                {% for category in category_list %}
                <li>
                  <a
                    href="{% url 'blog:category_list' category.id %}"
                    class="{% if current_category_id == category.id %}is-active{% endif %}"
                  >
                    <span class="icon-text">
                      <span class="icon">
                        <i class="fas {{ category.icon }}"></i>
                      </span>
                      <span>{{ category.name }}</span>
                    </span>
                  </a>
                </li>
                {% endfor %}
              </ul>
            </aside>
          </div>
          {% endblock %}
   
        </div>

        <div class="column is-7">
          <div class="box">
            {% block content %}
        
            {% for post in page_obj %}
            <article class="media">
              <div class="media-content">
                <div class="content">
                  <h1 class="is-size-5">
                    <a href="{% url 'blog:post_detail' post.id %}"
                      >{{ post.title }}</a
                    >
                    <!-- 如果文章是热门的，则添加一个热门标签 -->
                    {% if post.is_hot %}
                    <span class="tag is-warning is-normal">
                      <i class="fas fa-fire"></i>
                    </span>
                    {% endif %}
                  </h1>
                  <p class="has-text-grey-light is-size-6">
                    {{ post.desc | slice:":150" }} ...
                  </p>
                </div>
                <nav class="level is-mobile">
                  <div class="level-left">
                    <a class="level-item has-text-grey-light">
                      <span class="icon"><i class="fas fa-stream"></i></span>
                      <span>{{ post.category }} </span>
                    </a>

                    <div class="level-item has-text-grey-light">
                      <span class="icon"
                        ><i class="fas fa-solid fa-eye"></i
                      ></span>
                      <span> {{ post.pv }} </span>
                      <!-- 假设有一个浏览计数 -->
                    </div>
                  </div>
                  <div class="level-right">
                    {% for tag in post.tags.all %}
                    <div class="level-item has-text-grey-light">
                      <span class="tag is-light"> {{ tag.name }} </span>
                    </div>
                    {% endfor %}
                  </div>
                </nav>
              </div>
            </article>
            {% endfor %} 
            {% endblock %}
          </div>

          <nav
            class="pagination is-small"
            role="navigation"
            aria-label="pagination"
          >
            <!-- 上一页链接 -->
            {% if page_obj.has_previous %}
            <a
              class="pagination-previous"
              href="?page={{ page_obj.previous_page_number }}"
              aria-label="Previous page"
              >上一页</a
            >
            {% endif %}

            <!-- 页码链接 -->
            <ul class="pagination-list">
              {% for num in page_obj.paginator.page_range %}
              <li>
                <a
                  class="{% if page_obj.number == num %}pagination-link is-current{% else %}pagination-link{% endif %}"
                  aria-label="Page {{ num }}"
                  aria-current="page"
                  href="?page={{ num }}"
                  >{{ num }}</a
                >
              </li>
              {% endfor %}
            </ul>

            <!-- 下一页链接 -->
            {% if page_obj.has_next %}
            <a
              class="pagination-next"
              href="?page={{ page_obj.next_page_number }}"
              aria-label="Next page"
              >下一页</a
            >
            {% endif %}
          </nav>
        </div>

        <div class="column is-3-fullhd">
        <div class="box">
          <h1><span class="icon"><i class="fas fa-search"></i></span> 搜索</h1>
          <div class="dropdown-divider"></div>
          <form action="/search/" method="get">
              <div class="field">
                <div class="control has-icons-left has-icons-right">
                  <input class="input is-medium has-text-grey-light" type="search" name="q" placeholder="输入关键字,回车搜索" value="">
                  
                  <span class="icon is-small is-left">
                    <i class="fab fa-searchengin"></i>
                  </span>

                  <span class="icon is-small is-right">
                    <i class="fas fa-check"></i>
                  </span>

                </div>
              </div>
          </form>
        </div>

        <div class="box">
          <h1 class="has-text-weight-bold">
              <span class="icon"><i class="fas fa-tags"></i></span> 标签
          </h1>
          <div class="dropdown-divider"></div>
          <div class="tags">
            {% for tag in tags %}
            <a class="tag" href="{% url 'blog:tag_detail' tag.id %}">
                {{ tag.name }}
            </a>
            {% endfor %}
          </div>
        </div>

      </div>

      </div>
    </div>

    <!-- footer -->
    <footer class="footer mt-3" style="border-top: solid 1px #e5e5e5">
      <div class="content has-text-centered">
        <p>
          CopyRight © 2024 广东外语外贸大学南国商学院 All Rights Reserved.<br />
          <a class="has-text-grey-light is-family-primary">2320601313 李嘉定</a>
        </p>
      </div>
    </footer>
  </body>
</html>
